<template>
  <div class="login">
    <img
      class="logo"
      src="https://ts1.cn.mm.bing.net/th/id/R-C.126ed9ba784ed508b8a5aa7cdc91d20b?rik=T%2fTqDIvrH4%2bdrw&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f05%2f49%2fWt6juVZAhI.jpg&ehk=r6PQOhwFPNlBNjgal8MqEMKdDizMJirbxDRiBwz6gqg%3d&risl=&pid=ImgRaw&r=0"
      alt=""
    />

    <van-cell-group class="box">
      <van-field
        v-model="account"
        label-align="left"
        required
        right-icon="question"
        label="用户名"
        placeholder="请输入用户名"
        @click-right-icon="handleQuestion"
      />
      <van-field
        v-model="password"
        label="密码"
        required
        placeholder="请输入密码"
        type="password"
      />

      <van-field
        v-if="!islogin"
        v-model="repassword"
        required
        label="确认密码"
        placeholder="请确认密码"
        type="password"
      />
    </van-cell-group>

    <van-row gutter="30">
      <van-col span="12">
        <van-button type="info" size="small" @click="register">
          {{ islogin ? "注册" : "已有账号" }}
        </van-button>
      </van-col>
      <van-col span="12">
        <van-button plain type="info" size="small" @click="login">
          {{ islogin ? "登录" : "注册并登录" }}
        </van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { login ,register } from "@/axios/index.js";
import { mapActions } from "vuex";
// import SocketIO from "socket.io-client";
// import vueSccketIO from "vue-socket.io";
export default {
  data() {
    return {
      account: "17746617139",
      password: "admin",
      repassword: "",
      islogin: true,
    };
  },
  methods: {
    ...mapActions(["saveuserInfoAction"]),
    handleQuestion() {
      this.$toast("账号是手机号");
    },
    register() {
      this.islogin = !this.islogin;
    },
    login() {
      var reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.account) || !this.password) {
        this.$toast.fail("用户名或密码不能为空");
        return;
      }
      if (this.islogin) {
        //登录
        login({
          account: this.account,
          password: this.password,
        }).then((res) => {
          console.log(res);
          //将用户名保存在仓库中
          this.saveuserInfoAction(res.data);
          this.$toast(res.msg);
          
          // this.$router.push({path:'/home',query:{id:123}})
          //连接本地服务器/本地服务器当作转接
          this.$socket.emit('seting',{request:'请求创建聊天用户',account:this.account})//传输连接键
          this.$router.push("/home");
        });
      } else {
        //注册
        if (this.repassword !== this.password) {
            this.$toast.fail('密码不一致请重新输入')
            return
        }
        //请求
        register({
            account: this.account,
            password: this.password,
        }).then(res =>{
          this.saveuserInfoAction(res.data)
          this.$toast('注册登录成功')
          this.$router.push('/home')
        })
      }
    },
  }
};
</script>

<style lang="less" scoped>
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .logo {
    width: 300px;
    margin: 20px 0 20px;
  }
  .van-row {
    padding: 0 10%;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    margin-top: 100px;
    .van-button {
      width: 100%;
    }
  }
}
</style>